<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { UPDATE_MODEL_EVENT } from '@jctech/constants/event';
import { textToValueArr, valueToTextArr } from '@jctech/components/common/helper';
import { selectEmits, selectProps } from './selectSrc';

const props = defineProps(selectProps);

const emits = defineEmits(selectEmits);

defineOptions({
  name: 'CSelect'
});

const selectRef = ref(null);
const propsModelValue = computed(() => {
  return props.isMutual ? props.modelValue : Array.isArray(props.modelValue) ? props.modelValue : [];
});
const selectSource = computed(() => {
  const source = [];
  if (props.hasEmpty && props.isMutual) {
    source.push({
      text: props.emptylabel,
      value: props.emptyvalue
    });
  }
  for (const s of props.source) {
    source.push(s);
  }
  return source;
});
const handleUpdate = (value) => {
  emits(UPDATE_MODEL_EVENT, value);
};
</script>

<template>
  <el-form-item :label="props.label" :prop="props.prop" class="jctech-control-wrapper">
    <el-select :model-value="propsModelValue" :multiple="!props.isMutual" @update:modelValue="handleUpdate">
      <el-option v-for="item in props.source" :key="item.text" :label="item.text" :value="item.value" />
    </el-select>
  </el-form-item>
</template>

<style scoped lang="less"></style>
